<script setup>
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close, Cloudy, HomeFilled, Promotion, ChromeFilled, Orange } from "@element-plus/icons-vue";
import { ElButton, ElCard, ElCol, ElDivider, ElIcon, ElImage, ElLink, ElRow, ElScrollbar, ElTag } from "element-plus";
import { ref } from "vue";

const version = ref("");

const goTarget = (url) => {
    window.open(url, "_blank");
}
</script>

<template>
    <ElScrollbar>
        <!-- <ElRow>
        </ElRow>
        <ElDivider></ElDivider> -->
        <ElRow>
            <ElCol :span="24" :lg="12">
                <h3>快安后台管理系统</h3>
                <p>
                    参考ruoyi-vue实现的自己的后台管理系统。
                </p>
                <p>
                    <b>当前版本:</b> <span>{{ version }}</span>
                </p>
                <p>
                    <ElTag type="danger">&yen;免费开源</ElTag>
                </p>
                <p>
                    <ElButton type="primary" size="small" :icon="Cloudy" plain
                        @click="goTarget('https://gitee.com/breezefaith/fast-alden')">
                        访问码云</ElButton>
                    <ElButton size="small" :icon="HomeFilled" plain @click="goTarget('https://tech.zc1288.com')">访问主页
                    </ElButton>
                </p>
            </ElCol>
            <ElCol :span="24" :lg="12">
                <ElRow>
                    <ElCol :span="24">
                        <h3>技术选型</h3>
                    </ElCol>
                </ElRow>
                <ElRow>
                    <ElCol :span="12">
                        <h4>后端技术</h4>
                        <ul>
                            <li>Java 21</li>
                            <li>SpringBoot 3.2.0</li>
                            <li>Spring Security 6.4.0</li>
                            <li>Spring Data JPA</li>
                            <li>Spring Data Redis</li>
                            <li>Spring WebMVC</li>
                            <li>Spring WebSocket</li>
                            <li>Spring Doc</li>
                            <li>Druid</li>
                            <li>JWT</li>
                            <li>Easy Captcha</li>
                            <li>Easy Excel</li>
                            <li>Lombok</li>
                            <li>七牛云</li>
                            <li>...</li>
                        </ul>
                    </ElCol>
                    <ElCol :span="12">
                        <h4>前端技术</h4>
                        <ul>
                            <li>TypeScript</li>
                            <li>Tailwind CSS</li>
                            <li>Vue3</li>
                            <li>Element Plus</li>
                            <li>Pinia</li>
                            <li>Axios</li>
                            <li>Sass</li>
                            <li>Vite</li>
                            <li>...</li>
                        </ul>
                    </ElCol>
                </ElRow>
            </ElCol>
        </ElRow>
        <ElDivider></ElDivider>
        <ElRow>
            <ElCol :span="8" class="card-container">
                <ElCard>
                    <template #header>
                        <span>联系方式</span>
                        <span>
                            （官网<ElLink href="https://tech.zc1288.com" target="_blank">https://tech.zc1288.com</ElLink>）
                        </span>
                    </template>
                    <div>
                        <div class="flex">
                            <div class="w-1/2">
                                <p>微信公众号</p>
                                <p>
                                    <ElImage class="w-full h-[240px]" src="/imgs/mp_pianan.jpg"></ElImage>
                                </p>
                            </div>
                            <div class="w-1/2">
                                <p>微信</p>
                                <p>
                                    <ElImage class="w-full h-[220px]" src="/imgs/wx_yangqing.jpg"></ElImage>
                                </p>
                            </div>
                        </div>
                    </div>
                </ElCard>
            </ElCol>
            <ElCol :span="8" class="card-container">
                <ElCard>
                    <template #header>
                        <span>捐赠支持</span>
                    </template>
                    <div>
                        <div class="flex">
                            <div class="w-1/2">
                                <p>支付宝</p>
                                <p>
                                    <ElImage src="/imgs/alipay.jpg" style="height: 240px;"></ElImage>
                                </p>
                            </div>
                            <div class="w-1/2">
                                <p>微信</p>
                                <p>
                                    <ElImage src="/imgs/wxpay.jpg" style="height: 240px;"></ElImage>
                                </p>
                            </div>
                        </div>
                    </div>
                </ElCard>
            </ElCol>
        </ElRow>
    </ElScrollbar>
</template>

<style lang="scss" scoped>
.card-container {
    padding-right: 10px;
    padding-bottom: 10px;
}
</style>